<template>
    <div style="">

        <DetailTop></DetailTop>
        <div class="animated fadeInUp"
             style="width: 1200px;margin: 0 auto;border: 1px solid #EBEBEB;border-radius: 5px">
            <div style="display: flex;justify-content: space-between">
                <div style="font-size: 20px;display: flex;align-items: center"> {{detail.title}}</div>
                <div style="color: #5CC7D4;padding: 10px;border-bottom: 1px solid #5CC7D4">详细信息</div>
            </div>
            <!--            600 400-->
            <!--            图片开始-->
            <div style="display: flex;justify-content: center;">
                <div style="width: 600px">
                    <el-carousel
                            :interval="2000"
                            style="width: 100%" height="460px" indicator-position="outside">
                        <el-carousel-item
                                :indicator-position="none"
                        >
                            <el-image
                                    class="story-img"
                                    :src="detail.img"
                                    style="width: 600px;height: 400px">

                            </el-image>

                        </el-carousel-item>
<!--                        <el-carousel-item-->
<!--                                :indicator-position="none"-->
<!--                        >-->

<!--                            <el-image-->
<!--                                    class="story-img"-->
<!--                                    :src="require('@/assets/img/3.jpg')"-->
<!--                                    style="width: 600px;height: 400px">-->

<!--                            </el-image>-->
<!--                        </el-carousel-item>-->
                    </el-carousel>
                </div>
                <!--                <el-image-->
                <!--                        class="story-img"-->
                <!--                        :src="require('@/assets/img/2.jpg')"-->
                <!--                        style="width: 600px;height: 400px">-->

                <!--                </el-image>-->
            </div>
            <!--            图片结束-->
            <br>
            <br>
            <br>
            <br>
            <!--            详情信息-->
            <div v-html="detail.content" style="border-bottom: 1px solid #EBEBEB;padding-bottom: 30px">
            </div>
<!--            <div style="border-bottom: 1px solid #EBEBEB;padding-bottom: 30px;padding-top: 30px">-->
<!--                演示数据演示数据演-->
<!--            </div>-->
<!--            <div style="border-bottom: 1px solid #EBEBEB;padding-bottom: 30px;padding-top: 30px">-->
<!--                演示数据演示数据演-->
<!--            </div>-->
<!--            <div style="display: flex;justify-content: space-around">-->
<!--                <div style="width: 500px">出游天数： 十四日游</div>-->
<!--                <div style="width: 300px;text-align: left">目的地： 北欧</div>-->
<!--            </div>-->
<!--            <div style="display: flex;justify-content: center">-->
<!--                <div class="dinggou"-->
<!--                     style="color: #FF461C;border-radius: 6px;padding: 2px 10px;width: 70px;margin-top: 50px;margin-left: 20px;border: 1px solid #FF461C">-->
<!--                    立即预购-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <!--        底部-->
        <br>
        <br>
        <br>
        <Foot></Foot>
    </div>
</template>

<script>
    import DetailTop from "../components/top/DetailTop";
    import Foot from "../components/bottom/Foot";

    export default {
        created() {
            // console.log();
            this.getDetailInfo()
        },
        data() {
            return {
                detail: {}
            }
        },
        methods: {
            async getDetailInfo() {
                let id = this.$route.query.id
                let {data: res} = await this.$http.get('/story/detail/' + id);
                console.log(res);
                this.detail = res.data;
            }
        },
        components: {
            DetailTop,
            Foot
        },
        name: "Detail"
    }
</script>

<style scoped>
    .dinggou:hover {

        color: #ffffff !important;
        background-color: #FF461B;
    }

    .dinggou {
        cursor: pointer;
        transition: all 0.5s;
    }
</style>